<script setup>
import { Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
import {
  getShoppingCarInfoService,
  updateShoppingCarService,
  deleteShoppingCarGoodsService,
} from "@/api/shoppingCar";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useGoodsInfoStore } from "@/store/goods"

//购物车内的商品的信息
const shoppingCar = ref([]);

//总价格
const totalPrice = ref(0);

const router = useRouter();

//定义要购买的商品的信息
const goodsInfoStore = useGoodsInfoStore();

//获取购物车信息
const getShoppingCar = async () => {
  const result = await getShoppingCarInfoService();
  shoppingCar.value = result.data;
  getTotalPrice();
};

getShoppingCar();

//获取总价格
const getTotalPrice = () => {
  totalPrice.value = shoppingCar.value.reduce((sum, shoppingCar) => sum + shoppingCar.goodsNum * shoppingCar.price * (shoppingCar.isPurchase==true ? 1 : 0), 0);
  totalPrice.value = parseFloat(totalPrice.value.toFixed(2));
}

//点击勾选框后更新状态
const updateShoppingCarIsPurchase = async (row) => {
  row.isPurchase = !row.isPurchase;
  const data = {
    customerName: row.customerName,
    businessName: row.businessName,
    goodsName: row.goodsName,
    goodsNum: row.goodsNum,
    isPurchase: row.isPurchase,
    image: row.image,
    price: row.price
  }
  await updateShoppingCarService(data);
  //更新一下状态
  getShoppingCar();
};

//商品数量更改后调用函数
const updateShoppingCarGoodsNum = async (row) => {
  const data = {
    customerName: row.customerName,
    businessName: row.businessName,
    goodsName: row.goodsName,
    goodsNum: row.goodsNum,
    isPurchase: row.isPurchase,
    image: row.image,
    price: row.price
  }
  await updateShoppingCarService(data);
  getTotalPrice();
};

//删除购物车的商品
const deleteShoppingCarGoods = async (row) => {
  //删除商品
  ElMessageBox.confirm("您确认不要该商品了吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //确认了删除商品
      const params = new Map([
        ["goods_name", row.goodsName],
        ["business_name", row.businessName],
      ]);
      const result = await deleteShoppingCarGoodsService(params);
      ElMessage({
        type: result.message !== "操作成功" ? "error" : "success",
        message:
          result.messagee !== "操作成功" ? result.message : "删除商品成功",
      });
      getShoppingCar();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "用户取消了删除商品",
      });
    });
};

//跳转到购买界面
const redirectToPurchaseGoods = () => {
  goodsInfoStore.setGoodsInfo(shoppingCar.value.filter(item => item.isPurchase));
  const url = router.resolve({name: 'purchaseGoods'}).href;
  window.open(url, '_blank');
}
</script>
<template>
  <router-view></router-view>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>我的购物车</span>
        <div class="extra">
          <label>总价格: {{ totalPrice }}&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <el-button type="primary" @click="redirectToPurchaseGoods" :disabled="totalPrice == 0">立即购买</el-button>
        </div>
      </div>
    </template>
    <el-table :data="shoppingCar" style="width: 100%">
      <el-table-column label="是否购买" width="100px">
        <template #default="{ row }">
          <el-checkbox
            v-model="row.isPurchase"
            size="large"
            @click="updateShoppingCarIsPurchase(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品图像">
        <template #default="{ row }">
          <img :src=row.image style="width: 100px; object-fit: cover;">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        width="400px"
        prop="goodsName"
      ></el-table-column>
      <el-table-column label="商家名" prop="businessName" width="200px">
      </el-table-column>
      <el-table-column label="数量">
        <template #default="{ row }">
          <el-input-number
            v-model="row.goodsNum"
            :min="1"
            @change="updateShoppingCarGoodsNum(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template #default="{ row }">
          {{ (row.price*row.goodsNum).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template #default="{ row }">
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="deleteShoppingCarGoods(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>